<template>
  <div class="app-container">
<!--    查询组件-->
    <div style="height: auto">
      <div style="float: left">
        <el-button type="primary" @click="handleCreate" style="margin-left: 10px" >添加所属</el-button>
      </div>
      <div style="">
        <el-form ref="QueryFrom" :model="queryDate">
          <el-button  style="display: inline-block;float: right;width: 100px" type="primary" @click="handleQuery" >查询</el-button>

          <el-select clearable placeholder="状态" v-model="queryDate.status" style="display: inline-block;float: right;width: 130px;margin-right: 5px">
            <el-option
              v-for="item in optionsquery"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-input v-model="queryDate.saleperson" placeholder="所属名称"  style="display: inline-block;float: right;width: 130px;margin-right: 5px"   ></el-input>
        </el-form>
      </div>
    </div>
<!--    表格组件-->
    <el-table ref="ExpandTable" v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>

      <el-table-column label="所属名称" width="380" align="center">
        <template slot-scope="scope">
          {{ scope.row.saleperson }}
        </template>
      </el-table-column>
      <el-table-column label="联系人" width="380" align="center">
        <template slot-scope="scope">
          {{ scope.row.contact }}
        </template>
      </el-table-column>
      <el-table-column label="联系号码" width="380" align="center">
        <template slot-scope="scope">
          {{ scope.row.tel}}
        </template>
      </el-table-column>
      <el-table-column label="状态" width="70" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 0">启用</span>
          <span v-if="scope.row.status == 1">作废</span>
        </template>
      </el-table-column>
      <el-table-column label="创建者" width="170" align="center">
        <template slot-scope="scope">
          {{ scope.row.createAdminTrueName }}
        </template>
      </el-table-column>
      <el-table-column label="创建日期" width="170" align="center">
        <template slot-scope="scope">
          {{ scope.row.createDate }}
        </template>
      </el-table-column>
      <el-table-column label="操作"  align="center" width="atuo">
        <template slot-scope="scope">
          <el-button size="small" type="primary" @click="handleChange(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页组件-->
    <div class="pagination-container">

      <el-pagination
        background

        @current-change="handleCurrentChange"

        :current-page="pagination.currentPage"

        :page-size="pagination.pageSize"

        layout="total, prev, pager, next, jumper"

        :total="pagination.total">

      </el-pagination>
    </div>

    <!-- 新增合同所属标签弹层 -->
    <div >
      <el-dialog title="新建所属" :visible.sync="dialogAddVisible" :before-close="cancel_" width="22%" :close-on-click-modal='false'>

        <el-form ref="dataAddForm" :model="BelongData" :rules="rules" label-position="right" >
          <div>
            <el-form-item label="所属名称" prop="saleperson">
              <el-input v-model="BelongData.saleperson"/>
            </el-form-item>
            <el-form-item label="联系人"  prop="contact">
              <el-input v-model="BelongData.contact"/>
            </el-form-item>
            <el-form-item label="联系号码" prop="tel">
              <el-input v-model="BelongData.tel"/>
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-select v-model="BelongData.status" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel()">取消</el-button>
          <el-button type="primary" @click="handleAdd()">确定</el-button>
        </div>

      </el-dialog>

    </div>

    <!-- 修改标签弹层 -->
    <div >
      <el-dialog title="修改所属" :visible.sync="dialogUpdateVisible" :before-close="cancel_" width="22%" :close-on-click-modal='false'>

        <el-form ref="dataAddForm" :model="BelongData" :rules="rules" label-position="right" >
          <div>
            <el-form-item label="所属名称" prop="saleperson">
              <el-input v-model="BelongData.saleperson"/>
            </el-form-item>
            <el-form-item label="联系人"  prop="contact">
              <el-input v-model="BelongData.contact"/>
            </el-form-item>
            <el-form-item label="联系号码" prop="tel">
              <el-input v-model="BelongData.tel"/>
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-select v-model="BelongData.status" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel()">取消</el-button>
          <el-button type="primary" @click="handleUpdate()">确定</el-button>
        </div>

      </el-dialog>

    </div>


  </div>
</template>

<script>
import api from '@/api/saleContractBelong'

export default {
  data() {
    return {
      BelongData: {},
      dialogUpdateVisible: false,
      dialogAddVisible: false,
      queryDate: {},
      rules: {//校验规则
        saleperson: [{ required: true, message: '所属名称为必填项', trigger: 'blur' }],
        status: [{ required: true, message: '状态为必填项', trigger: 'change' }],
      },
      list: [],
      listLoading: true,
      //下拉选项
      options: [{
        value: 0,
        label: '启用'
      }, {
        value: 1,
        label: '作废'
      }],
      optionsquery: [{
        value: 0,
        label: '启用'
      }, {
        value: 1,
        label: '作废'
      }],
      pagination: {//分页相关模型数据
        currentPage: 1,//当前页码
        pageSize: 10,//每页显示的记录数
        total: 0,//总记录数
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    //查询
    handleQuery() {
      let Querydata = new FormData()
      Querydata.append("currentPage", this.pagination.currentPage)
      Querydata.append("pageSize", this.pagination.pageSize)
      if (this.queryDate.saleperson != null&&this.queryDate.saleperson!=""&&typeof (this.queryDate.saleperson)!= 'undefined')
        Querydata.append("saleperson", this.queryDate.saleperson)
      if (this.queryDate.status != null&&this.queryDate.status!=""&&typeof (this.queryDate.status)!= 'undefined')
        Querydata.append("status", this.queryDate.status)
      api.query(Querydata).then(resp => {
          this.list = resp.data.page.content
          this.pagination.currentPage = resp.data.page.number + 1
          this.pagination.pageSize = resp.data.page.size
          this.pagination.total = resp.data.page.totalElements
          this.listLoading = false
        }
      )
    },
    //切换页码
    handleCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage
      this.getAll()
    },
    //查询所有
    getAll() {
      api.getList(this.pagination).then(response => {
        this.list = response.data.page.content
        this.pagination.currentPage = response.data.page.number + 1
        this.pagination.pageSize = response.data.page.size
        this.pagination.total = response.data.page.totalElements
        this.listLoading = false
        }
      )
    },
    //初始化
    fetchData() {
      this.listLoading = true

      this.getAll()
    },
    //弹出添加框
    handleCreate() {
      this.BelongData = {}
      this.dialogAddVisible = true
    },
    //添加合同操作
    handleAdd() {
      // typeof (this.BelongData.remarks) != 'undefined'
      this.$refs.dataAddForm.validate((valid) => {
        if (!valid) {
          this.$message.warning(valid)
        } else {
          api.update(this.BelongData).then((res) => {
            if (res.success)
              this.$message.success("新增成功")
            else
              this.$message.warning(res.message)
          }).catch(
          ).finally(
            this.cancel()
            // ,this.getAll()
          )
        }
      })

    },
    //弹出修改合同框
    handleChange(row) {
      this.BelongData = row
      this.dialogUpdateVisible = true
    },
    //修改操作
    handleUpdate() {
      api.update(this.BelongData).then(res => {
        if (res.success)
          this.$message.success("更新成功")
        else
          this.$message.success("更新失敗")
      }).finally(
        this.dialogUpdateVisible = false
      )

    },
    cancel_(){
      this.$confirm("确认关闭？",{
        type: 'warning'
      }).then(()=>{
        this.cancel()
      })
    },
    //取消按钮
    cancel() {
      this.dialogUpdateVisible = false
      this.dialogAddVisible = false
      this.BelongData = {}

    },

  },
  computed: {

  }
}
</script>
